<template>
	<view class="head-box" :style="isOther?'padding-bottom: 120rpx;':''">
		<view class="con-boxcom">
			<view class="head-info">
				<!-- 头部卡片 -->
				<swiper @click="toUrl('./swiperMana?type=1')" style="width: 750rpx;height: 560rpx;" :autoplay="true"
					:circular='true' :interval="3000" :duration="1000">
					<swiper-item @click="swiperIndex = index"
						style="display: flex;align-items: center;justify-content: center;"
						v-for="(item,index) in picList" :key="index">
						<image class="img-top" :src="item.picPath"></image>
					</swiper-item>
				</swiper>
				<view class="con-info" style="position: relative;">
					<image class="img-head" @click="previewHead" :src="indexDetail.headIMG"></image>
					<view class="editicon" v-if="!isShare" style="position: absolute;right: 40rpx;top: 20rpx;">
						<u-icon name="edit-pen" size="30" color="#2c8cff" @click="toEdit" v-if="!isOther"></u-icon>
						<u-icon name="more-dot-fill" v-if="useState.isMyFriend && !useState.inMyList && isOther"
							size="30" color="#666" @click="showMask = true"></u-icon>
					</view>
					<text
						class="item-name">{{indexDetail.companyNameCn || indexDetail.realName || indexDetail.usrName}}</text>
					<view class="nav-bom">
						<text class="nav-bom-item">{{indexDetail.cityName || indexDetail.address}}</text>
						<text class="nav-bom-item" style="width: 40%;">{{indexDetail.industryTypeName}}</text>
						<text class="nav-bom-item" @click="callPeo()">{{indexDetail.phoneName}}</text>
					</view>
				</view>
				<!-- 名片数据 -->
				<!-- <view class="card-box u-flex u-row-center">
					<my-data margin="0" radius="10rpx" backColor="#f8f8f8"></my-data>
				</view> -->
				<!-- 企业简介 -->
				<view class="comp-contro"
					v-if="indexDetail.remarks || indexDetail.mainBusiness || indexDetail.subBusiness">
					<text class="contro-text1" v-if="indexDetail.remarks">{{version == 1?'个人简介':'企业简介'}}</text>
					<text class="contro-text2" v-if="indexDetail.remarks">{{indexDetail.remarks}}</text>
					<text class="contro-text2"
						v-if="version == 2 && indexDetail.mainBusiness">主营业务：{{indexDetail.mainBusiness}}</text>
					<text class="contro-text2"
						v-if="version == 2 && indexDetail.subBusiness">次营业务：{{indexDetail.subBusiness}}</text>
				</view>
				<!-- 环境展示 -->
				<view class="pro-card" v-if="version == 2 && ((proList.length && isOther) || !isOther)">
					<view class="card-top">
						<view class="top-info1">
							<text class="top-info1-text" style="line-height: 34rpx;margin-top: 18rpx;">环境展示</text>
						</view>
						<view @click="toUrl('/pages/meSub/editData/compManaList?type=4')" class="editicon"
							v-if="!isShare">
							<u-icon name="edit-pen" size="24" color="#2c8cff" v-if="!isOther"></u-icon>
						</view>
					</view>
					<view class="pro-content" v-if="sourceList.length">
						<scroll-view scroll-x="true">
							<view class="img-box" :style="'width:'+(sourceList.length * 240)+'rpx;height:280rpx'">
								<view class="img-box-item" v-for="(item,index) in sourceList" :key="index">
									<image @click="proImg(item.imgName)" class="top-info1-img2"
										style="background-color:#FFFFFF;" :src="item.imgName"></image>
									<text class="img-price">{{item.productName}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 产品展示 -->
				<view class="pro-card" v-if="version == 2 && ((proList.length && isOther) || !isOther)">
					<view class="card-top" v-if="">
						<view class="top-info1">
							<text class="top-info1-text" style="line-height: 34rpx;margin-top: 18rpx;">产品展示</text>
						</view>
						<view @click="toUrl('/pages/meSub/editData/compManaList?type=1')" class="editicon"
							v-if="!isShare">
							<u-icon name="edit-pen" size="24" color="#2c8cff" v-if="!isOther"></u-icon>
						</view>
					</view>
					<view class="pro-content" v-if="proList.length">
						<scroll-view scroll-x="true">
							<view class="img-box" :style="'width:'+(proList.length * 240)+'rpx;height:280rpx'">
								<view class="img-box-item" v-for="(item,index) in proList" :key="index">
									<image @click="proImg(item.imgName)" class="top-info1-img2"
										style="background-color:#FFFFFF;" :src="item.imgName"></image>
									<text class="img-price">{{item.productName}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 店铺 -->
				<view class="pro-card" v-if="goodList && goodList.length">
					<view class="card-top">
						<view class="top-info1">
							<image class="top-info1-img" :src="shopInfo.shopLogo"></image>
							<text class="top-info1-text">{{shopInfo && shopInfo.shopName}}</text>
						</view>
					</view>
					<view class="pro-content" @click="toLoad">
						<view class="img-box">
							<view class="img-box-item" v-for="(item,index) in goodList" :key="index">
								<image class="top-info1-img2" :src="item.goodsImage[0]"></image>
								<text class="img-price">￥{{item.price || item.shopPrice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<my-auth-modal></my-auth-modal>
		<web-view src="webSrc" v-if="webSrc"></web-view>
		<!-- 极速联系 -->
		<my-button :useNum="useNum" :acPhone="indexDetail.phoneName" :isShare="isShare" :isOther="isOther"></my-button>
		<u-action-sheet @select="selectItem" @close="showMask = false" :actions="stateList" :title="title" :show="showMask">
		</u-action-sheet>
	</view>
</template>
<script>
	import {
		selectPromotionState,
		queryPicList,
		queryEnterprisePic
	} from '@/common/api/auth.js'
	import {
		getToken,
		setToken
	} from '@/utils/token.js'
	import {
		getnowtime
	} from '@/utils/common.js'
	import {
		convertHtmlToText
	} from '@/static/js/parse.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		callPeople
	} from '@/utils/common.js'
	import store from '@/store/index.js'
	export default {
		props: ['version', 'useId', 'compId', 'sharePhone', 'isShare','isOther'],
		data() {
			return {
				indexData: {
					companyNo: '', //否	string	公司编号
					usrNo: '', //	否 string	用户编号
				},
				headWhite: false,
				swiperListData: {
					moduleNo: 'ydylapp1001', //	是	string	模块编号
					companyNo: '', //	是	string	公司编号
					craftsmanId: '', //	否	string	个人编号
					isType: '', //否	string	类别
				},
				proData: {
					stationType: '1', //	是	string	1产品,2-设备,3-资质,4-办公环境 5-应用案例 6-公司介绍 7-品质保证 8-资讯 9-问题 10-关于我们 11-公司认证
					companyNo: '', //	是	string	公司编号
				},
				picList: [], //轮播图数组
				proList: [], //产品数组
				sourceList: [], //企业环境
				indexDetail: {}, //用户信息
				goodList: [], //用户商品
				shopInfo: {}, //店铺信息
				// version: 1,
				swiperIndex: '',
				useNum: '', //用户编号
				freshSwiper: false,
				// isShare: false,
				currTitle: '个人主页',
				webSrc: "",
				acPhone: '',
				// isOther: false,
				title: '更多操作',
				showMask: false,
			}
		},
		onPullDownRefresh() {
			this.initPage()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created: function() {
			if (this.compId || this.useId) {
				this.useNum = this.compId || this.useId
			} else {
				this.useNum = getToken('useNum') || ''
			}
			this.initPage()
			if (this.sharePhone) {
				this.acPhone = this.sharePhone
			}
			if (this.version == 2) {
				this.currTitle = '公司主页'
			}
		},
		onShow: function() {
			// if(getToken('AUTH_TYPE'))
			// 	store.state.user.authType = getToken('AUTH_TYPE');
			if (this.isFresh) {
				//console.log('刷新首页')
				this.proList = []
				this.queryEnterprisePic('1')
				this.sourceList = []
				this.queryEnterprisePic('4')
				if (getToken('version') == 1) {
					this.queryCraftsmanById(this.useNum)
				} else if (getToken('version') == 2) {
					this.searchOneNew(this.useNum)
				}
			}
		},
		computed: {
			...mapGetters(['isFresh', 'useState', 'stateList']),
		},
		methods: {
			selectItem(e) {
				switch (e.name) {
					case '加入黑名单':
						this.$store.dispatch('usrBlackListInsert', this.useNum)
						break
					case '删除好友':
						this.$store.dispatch('delFriends', this.useNum)
						break
				}
			},
			callPeo() {
				callPeople(this.useNum, this.acPhone, this.isShare)
			},
			toEdit() {
				let url = ''
				if (getToken('version') == 1) {
					url = '/pages/meSub/editData/editData'
				} else if (getToken('version') == 2) {
					url = '/pages/meSub/editData/editDataComp'
				}
				uni.navigateTo({
					url: url
				})
			},
			//初始化页面
			initPage(use = '', ver = '') {
				this.picList = [] //轮播图数组
				this.proList = [] //产品数组
				this.indexDetail = {}
				if (ver) {
					this.version = ver
				}
				if (use) {
					this.useNum = use
				}
				//企业
				if (this.version == 2) {
					this.indexData.companyNo = this.useNum
					this.proData.companyNo = this.useNum
					this.swiperListData.companyNo = this.useNum
					delete this.indexData.usrNo
					//获取公司用户信息
					this.searchOneNew(this.useNum)
					//获取企业轮播图
					this.swiperListData.moduleNo = 'ydylapp1001'
					this.swiperListData.craftsmanId = ''
					this.queryPicList()
					//企业信息
					this.queryEnterprisePic('1')
					this.queryEnterprisePic('4')
				}
				//个人
				else if (this.version == 1) {
					delete this.indexData.companyNo
					this.indexData.usrNo = this.useNum
					this.swiperListData.craftsmanId = this.useNum
					//获取个人用户信息
					this.queryCraftsmanById(this.useNum)
					//获取个人轮播图
					this.swiperListData.companyNo = ''
					this.swiperListData.moduleNo = 'ydylAppUsr001'
					this.queryPicList()
				}
				this.selectPromotionState(this.useNum)
			},
			toLoad() {
				uni.showModal({
					title: '提示',
					content: '是否下载app购买商品',
					success(res) {
						if (res.confirm) {
							//下载app
							uni.navigateTo({
								url: '/pages/commSub/loginWeb'
							})
						}
					}
				})
			},
			toUrl(url) {
				if (url == './swiperMana?type=1' && this.isShare) {
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			proImg(url) {
				if (this.swiperIndex) {
					uni.previewImage({
						current: this.swiperIndex,
						urls: [`${url}`]
					})
					this.swiperIndex = ''
				} else {
					uni.previewImage({
						urls: [`${url}`]
					})
				}
			},
			previewHead() {
				let showImg = this.indexDetail.headIMG
				uni.previewImage({
					urls: [`${showImg}`]
				})
			},
			//获取轮播图
			queryPicList() {
				this.picList = []
				queryPicList(this.swiperListData).then(res => {
					if (res.data && res.data.length) {
						res.data.forEach(item => {
							if (this.version == 1) {
								item.picPath = 'https://www.ydylmold.cn/images/ydylapp/usrMainPic/usrCraftsmanImage/' + item.picPath
							} else if (this.version == 2) {
								item.picPath = 'https://www.ydylmold.cn/images/ydylapp/usrMainPic/usrCompanyImage/' + item.picPath
							}
						})
						this.picList = res.data
					}
				})
			},
			//获取用户商品页面
			selectPromotionState() {
				selectPromotionState(this.indexData).then(res => {
					let data = res.listData
					if (res.data && res.data.usrShop) {
						let info = res.data.usrShop
						info.shopLogo = this.imgPort + this.shopLogoImgUrl + info.shopLogo
						this.shopInfo = info
					}
					if (data && data.length) {
						data.forEach(item => {
							let arrimg = item.goodsImage.split(',')
							let arrCurr = []
							arrimg.forEach(i => {
								arrCurr.push(this.imgPort + this.goodImg + i)
							})
							item.goodsImage = arrCurr
						})
					}
					this.goodList = res.listData
				})
			},
			// 产品展示查询
			queryEnterprisePic(type) {
				this.proData.stationType = type
				queryEnterprisePic(this.proData).then(res => {
					let data = res.data
					if (data && data.length) {
						data.forEach(item => {
							if (type == '1') { //主页产品
								let arr = item.imgName.split(',')
								item.imgName =
									'https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/mainProductsImage/' +
									arr[0]
							} else if (type == '4') {
								let arr = item.imgName.split(',')
								item.imgName =
									'https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/enterprisePicImage/' +
									arr[0]
							}
						})
					}
					if (type == '1') {
						this.proList = data
					} else if (type == '4') {
						this.sourceList = data
					}
				})
			},
			//获取公司用户信息
			async searchOneNew(userId) {
				console.log('aaaaaaaaaaaaaaaaa');
				let data = await this.$store.dispatch('searchOneNew', {
					userId: this.useNum,
					isShare: this.isShare
				})
				if (data.companyId) {
					data.createDate = getnowtime(data.createDate)
					let arr1 = data.cityName && data.cityName.split(' ')
					let arr2 = data.industryTypeName && data.industryTypeName.split(' ')
					data.cityName = arr1[1]
					if (arr2[3]) {
						data.industryTypeName = arr2[0] + ' ' + arr2[3]
					} else if (arr2[2]) {
						data.industryTypeName = arr2[0] + ' ' + arr2[2]
					}
					uni.setNavigationBarTitle({
						title: data.companyNameCn
					})
					data.subBusiness = convertHtmlToText(data.subBusiness)
					data.mainBusiness = convertHtmlToText(data.mainBusiness)
					data.headIMG = 'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/' + data.companyLogo
					this.indexDetail = data
					this.indexDetail.phoneName = this.acPhone || (this.indexDetail && this.indexDetail.phone)
				}
			},
			//获取个人用户信息
			async queryCraftsmanById(userId) {
				let data = await this.$store.dispatch('queryCraftsmanById', {
					userId: userId,
					isShare: this.isShare
				})
				if (data.craftsmanId) {
					this.indexDetail = data
					let arr1 = data.address && data.address.split(' ')
					let arr2 = data.mainBusiness && data.mainBusiness.split(' ')
					data.cityName = arr1[1]
					if (arr2[3]) {
						data.industryTypeName = arr2[0] + ' ' + arr2[3]
					} else if (arr2[2]) {
						data.industryTypeName = arr2[0] + ' ' + arr2[2]
					} else {
						data.industryTypeName = data.mainBusiness
					}
					uni.setNavigationBarTitle({
						title: data.realName || data.usrName
					})
					data.headIMG = 'https://www.ydylmold.cn/images/ydylapp/usrCraftsman/image/' + data.headImg
					this.indexDetail.phoneName = this.acPhone || (this.indexDetail && this.indexDetail.usrTel)
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	/* pages/auth/headInfo/headInfo.wxss */
	/* 头部卡片 */
	.icon-white {
		font-size: 50rpx;
		color: #ffffff;
		position: absolute;
		top: 50rpx;
		left: 22rpx;
	}

	.img-top {
		width: 750rpx;
		height: 560rpx;
	}

	.editicon {
		color: #2c8cff;
		font-size: 35rpx;
		margin-top: 22rpx;
	}

	.con-info {
		background-color: #ffffff;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.img-head {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-top: 20rpx;
	}

	.item-name {
		font-size: 32rpx;
		color: #1A1A1A;
		font-weight: bold;
		margin-top: 20rpx;
	}

	.nav-bom {
		width: 750rpx;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-bom-item {
		width: 25.33%;
		display: block;
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;
		color: #1A1A1A;
	}

	.bor {
		width: 750rpx;
		height: 20rpx;
	}

	/* 企业简介 */
	.comp-contro {
		padding: 20rpx 32rpx 20rpx 32rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		margin-top: 12rpx;
	}

	.contro-text1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #1A1A1A;
		margin: 25rpx 0;
	}

	.contro-text2 {
		font-size: 28rpx;
		font-weight: 500;
		color: #1A1A1A;
		line-height: 36rpx;
	}

	.block {
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #0080FF;
		margin: 35rpx 0 20rpx 0;
		text-align: center;
	}

	/* 店铺 */
	.pro-card {
		margin-top: 12rpx;
		padding: 0 20rpx 20rpx 20rpx;
		background-color: #ffffff;
	}

	.card-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-info1 {
		display: flex;
		align-items: center;
	}

	.top-info1-img {
		width: 44rpx;
		height: 44rpx;
		margin-left: 20rpx;
	}

	.top-info1-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #1A1A1A;
		margin-left: 20rpx;
		line-height: 88rpx;
	}

	.icon-right {
		font-size: 32rpx;
		color: #a8a8a8;
		margin-right: 5rpx;
	}

	.img-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* margin-top: 30rpx; */
	}

	.img-box-item {
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx;
		position: relative;
	}

	.top-info1-img2 {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.img-price {
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		display: block;
		width: 220rpx;
		height: 36rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 0 0 8rpx 8rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		text-align: center;
	}
</style>
